<template>
    <div>
        <el-dialog
            title="修改农场"
            :visible.sync="dialogVisible"
            width="880px"
        >
            <el-form ref="form" :model="form" label-width="120px" size="small">
                <el-form-item label="农场名称:" prop="name"
                              :rules="[{required: true, message: '请输入农场名称', trigger: 'blur'}]">
                    <el-input v-model="form.name" placeholder="请输入农场名称"></el-input>
                </el-form-item>
                <el-form-item label="农场编号:" prop="sn"
                              :rules="[{required: true, message: '请输入农场编号', trigger: 'blur'}]">
                    <el-input v-model="form.sn" placeholder="请输入农场编号"></el-input>
                </el-form-item>
                <el-form-item label="经纬度:" prop="version">
                    <div>
                        <el-button type="primary" @click="clickToAddPosition" size="small">添加经纬度</el-button>
                        <span style="margin-left: 20px;">经度</span>
                        <el-input v-model="form.latitude" style="width: 120px;margin-left: 10px;"
                                  :disabled="true"></el-input>
                        <span style="margin-left: 30px;">纬度</span>
                        <el-input v-model="form.longitude" style="width: 120px;margin-left: 10px;"
                                  :disabled="true"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="种植面积:" prop="acreage"
                              :rules="[{required: true, message: '请输入种植面积', trigger: 'blur'}]">
                    <el-input v-model="form.acreage" placeholder="请输入种植面积">
                        <template slot="append">m²</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="备注:" prop="remark">
                    <el-input v-model="form.remark" placeholder="请输入备注" type="textarea" :rows="2"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel" size="small">取 消</el-button>
                <el-button type="primary" @click="onSubmit" size="small" :loading="loading">确 定</el-button>
            </span>
        </el-dialog>
        <CreatePosition ref="createPosition" @onSubmit="getPosition"></CreatePosition>
    </div>
</template>

<script>
import {mapState} from "vuex";
import {upDateFarm} from "@/index/api/index/adoption/farm/farm"
import CreatePosition from "./createPosition/createPosition.vue"

export default {
    data() {
        return {
            dialogVisible: false,
            form: {
                name: "",
                sn: "",
                longitude: "",
                latitude: "",
                longitude1: "",
                latitude1: "",
                region: "",
                acreage: "",
                remark: "",
            },
            loading: false
        }
    },
    computed: {
        ...mapState(["token"]),
    },
    components: {
        CreatePosition
    },
    methods: {
        getPosition(data) {
            this.form.latitude = data.latitude
            this.form.longitude = data.longitude
        },
        clickToAddPosition() {
            this.$refs.createPosition.showDialog()
        },
        cancel() {
            this.dialogVisible = false;
            this.polygonPath = [];
            this.$refs["form"].resetFields();
            this.form.longitude = "";
            this.form.latitude = "";
        },
        showDialog(e,row) {
            this.form = row
            this.dialogVisible = !this.dialogVisible
        },
        onSubmit() {
            this.loading = true
            this.form.region = "{}"
            upDateFarm(this.form).then(res => {
                if (res.code == 200) {
                    this.dialogVisible = false;
                    this.$message({
                        message: res.message,
                        type: "success",
                    });
                    this.$parent.getFarmList();
                    this.polygonPath = [];
                    this.$refs["form"].resetFields();
                    this.form.longitude = "";
                    this.form.latitude = "";
                    this.loading = false
                } else {
                    this.$message({
                        message: res.message,
                        type: "error",
                    });
                    this.loading = false
                }
            })
        },

    }
}
</script>

<style lang="less" scoped>

.flex-container {
    display: flex;
    align-items: center; /* 垂直居中 */
    margin-top: 10px;
}
</style>
